<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false":visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" >
      <el-form-item label="店铺" prop="storeId">
        <el-select v-model="dataForm.storeId" clearable placeholder="请选择店铺"  style="width:350px">
          <el-option v-for="item in dataForm.storeList" :key="item.id" :label="item.storeName" :value="item.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员搜索">
        <el-autocomplete v-model="dataForm.memberSearch" @select="handleSelect" :fetch-suggestions="querySearchAsync"
                         placeholder="请输入会员姓名/会员电话" style="width:350px" :disabled="!dataForm.id ? false : true"></el-autocomplete>
      </el-form-item>
      <el-form-item label="会员名称" prop="memberName">
        <el-input v-model="dataForm.memberName" disabled ></el-input>
      </el-form-item>
      <el-form-item label="物品名称" prop="goodsName">
        <el-input v-model="dataForm.goodsName" placeholder="物品名称"></el-input>
      </el-form-item>
      <el-form-item label="原价" prop="originalPrice">
        <el-input-number v-model="dataForm.originalPrice" placeholder="原价"></el-input-number>
      </el-form-item>
      <el-form-item label="实付价" prop="actuallyPaid">
        <el-input-number v-model="dataForm.actuallyPaid" placeholder="实付价"></el-input-number>
      </el-form-item>
      <el-form-item label="付款方式" prop="payment">
        <el-select v-model="dataForm.payment" placeholder="请选择付款方式">
              <el-option v-for="item in this.dataForm.paymentList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="变化积分" prop="changePoint">
        <el-input-number v-model="dataForm.changePoint" placeholder="变化积分"></el-input-number>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
      <el-form-item label="消费时间" prop="createTime">
        <el-date-picker v-model="dataForm.createTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="消费日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        memberSearch: "",
        id: 0,
        goodsCode: "",
        goodsName: "",
        memberId: "",
        originalPrice: 0.0,
        discount: "",
        usePoint: "0",
        pointMoney: "0",
        actuallyPaid: 0.0,
        actuallyPaid_Q: 0.0,
        payment: "",
        changePoint: "",
        changePoint_Q: "",
        currentPoint: "",
        storeId: "",
        remark: "",
        author: "",
        monetary: 0.0,
        createTime: "",
        memberList: [],
        storeList: [],
        paymentList: [{value: '现金支付',label: '现金支付'},{value: '微信支付',label: '微信支付'},{value: '支付宝',label: '支付宝'}],
        ratio: ""
      },
      dataRule: {
        goodsCode: [
          { required: true, message: "物品编码不能为空", trigger: "blur" }
        ],
        goodsName: [
          { required: true, message: "物品名称不能为空", trigger: "blur" }
        ],
        memberName: [
          { required: true, message: "该会员不存在", trigger: "blur" }
        ],
        originalPrice: [
          { required: true, message: "原价不能为空", trigger: "blur" }
        ],
        actuallyPaid: [
          { required: true, message: "实付价不能为空", trigger: "blur" }
        ],
        payment: [
          { required: true, message: "付款方式不能为空", trigger: "blur" }
        ],
        storeId: [
          { required: true, message: "店铺Id不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/bus/costrecord/info/${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.goodsCode = data.costRecord.goodsCode;
              this.dataForm.goodsName = data.costRecord.goodsName;
              this.dataForm.memberId = data.costRecord.memberId;
              this.dataForm.memberName = data.costRecord.memberName;
              this.dataForm.originalPrice = data.costRecord.originalPrice;
              this.dataForm.discount = data.costRecord.discount;
              this.dataForm.usePoint = data.costRecord.usePoint;
              this.dataForm.pointMoney = data.costRecord.pointMoney;
              this.dataForm.actuallyPaid = data.costRecord.actuallyPaid;
              this.dataForm.actuallyPaid_Q = data.costRecord.actuallyPaid;
              this.dataForm.payment = data.costRecord.payment;
              this.dataForm.changePoint = data.costRecord.changePoint;
              this.dataForm.changePoint_Q = data.costRecord.changePoint;
              this.dataForm.currentPoint = data.costRecord.currentPoint;
              this.dataForm.storeId = data.costRecord.storeId;
              this.dataForm.remark = data.costRecord.remark;
              this.dataForm.monetary = data.costRecord.monetary;
              this.dataForm.author = data.costRecord.author;
              this.dataForm.createTime = data.costRecord.createTime;
            }
          });
        }
      });
      //加载店铺信息
      this.$http({
        url: this.$http.adornUrl(`/bus/store/listByCondition`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataForm.storeList = data.list;
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/bus/costrecord/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              goodsCode: this.dataForm.goodsCode,
              goodsName: this.dataForm.goodsName,
              memberId: this.dataForm.memberId,
              originalPrice: this.dataForm.originalPrice,
              discount: this.dataForm.discount,
              usePoint: this.dataForm.usePoint,
              pointMoney: this.dataForm.pointMoney,
              actuallyPaid: this.dataForm.actuallyPaid,
              actuallyPaid_Q: this.dataForm.actuallyPaid_Q,
              payment: this.dataForm.payment,
              changePoint: this.dataForm.changePoint,
              changePoint_Q: this.dataForm.changePoint_Q,
              currentPoint: this.dataForm.currentPoint,
              monetary: this.dataForm.monetary,
              storeId: this.dataForm.storeId,
              remark: this.dataForm.remark,
              author: this.dataForm.author,
              createTime: this.dataForm.createTime
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    //计算实付金额
    getActuallyPaid() {   
      // var originalPrice = this.dataForm.originalPrice; // 原价
      // var currentPoint = this.dataForm.currentPoint; // 当前积分
      // var usePoint = this.dataForm.usePoint; // 使用积分
      // var originalPrice = this.dataForm.originalPrice;  // 积分兑换金额  
      // var ActuallyPaid = this.dataForm.ActuallyPaid;  // 积分兑换比例
      // var ActuallyPaid = this.dataForm.ActuallyPaid;  // 实付价格
    },
    querySearchAsync(queryString, callback) {
      var list = [{}];
      this.$http({
        url: this.$http.adornUrl('/bus/member/listByCondition'),
        method: "get",
        params: this.$http.adornParams({
          memberName: queryString,
          mobile: queryString
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          for(let i of data.list){
            i.currentPoint = i.currentPoint;
            i.monetary = i.monetary;
            i.id = i.id;
            i.mobile = i.mobile;
            i.memberName = i.memberName;
            i.value = i.memberName + "（" + i.mobile + "）";  //将想要展示的数据作为value
              // i.value = i.id;
          }
          list = data.list;
        }
        callback(list);
      });
    },
    handleSelect(item){
      console.log("选择="+item.value);
      if (item.id > 0) {
        this.dataForm.memberId = item.id;
        this.dataForm.currentPoint = item.currentPoint;
        this.dataForm.monetary = item.monetary;
        this.dataForm.usePoint = 0;
        this.dataForm.pointMoney = 0;
        this.dataForm.memberName = item.memberName + "（电话：" + item.mobile + "，当前积分：" + item.currentPoint + "）";
        this.memberSearch = item.value;
      }else{
        this.dataForm.memberName = "";
        this.memberSearch = "";
      }
    }
  }
};
</script>
